<!--
 * @Author: luosi 1297957337@qq.com
 * @Date: 2024-11-21 15:52:23
 * @LastEditors: huang liang miao 1127255342@qq.com
 * @LastEditTime: 2024-12-18 08:51:24
 * @FilePath: \sr_system_manager_ui\src\views\achievementReward\assessmentReward\managerWay\index.vue
 * @Description: 统计结果列表
-->

<template>
  <div class="manager-way-container">
    <TableForm ref="tableRef" :data="dataList" :columns="columns" :tableLoading="loading" :total-count="total"
      :hide-right-first-btn="true" :hide-right-second-btn="true" :hide-right-third-btn="true"
      :hide-right-forth-btn="true" :showPagination="true" :showToolBar="true" @refresh="getData">
      <template #leftMenu>
        <el-button type="primary" @click="handleEdit({}, 'add')"
          v-hasPermi="['achievementReward:assessmentReward:managerWay:addManagerWay']">新增管理办法</el-button>
      </template>
      <template #status="{ record }">
        <div class="flex items-center space-x-[8px]">
          <span class="h-[6px] w-[6px] rounded-[3px]"
            :style="{ backgroundColor: assessmentStatusBgColorMap[record.status as keyof typeof assessmentStatusBgColorMap] }" />
          <span
            :style="{ color: assessmentStatusBgColorMap[record.status as keyof typeof assessmentStatusBgColorMap] }">{{
              managerStatusMap[record.status as keyof typeof managerStatusMap] }}</span>
        </div>
      </template>
      <template #default="{ record }">
        <el-button link type="primary" @click="handleEdit(record, 'view')"
          v-hasPermi="['achievementReward:assessmentReward:managerWay:view']">查看 </el-button>
        <el-button v-if="record.status === 1" link type="primary" @click="handleEdit(record, 'edit')"
          v-hasPermi="['achievementReward:assessmentReward:managerWay:edit']">编辑 </el-button>
        <el-button v-if="record.status === 1" link type="primary" @click="handleEffect(record)"
          v-hasPermi="['achievementReward:assessmentReward:managerWay:effect']">生效 </el-button>
        <el-button v-if="record.status === 1" link type="danger" @click="handleDelete(record)"
          v-hasPermi="['achievementReward:assessmentReward:managerWay:del']">删除 </el-button>
      </template>
    </TableForm>

    <DelConfirmModal v-if="effectVisible" :visible="effectVisible" :text="`是否确定生效${currentRow.name}？`" ok-text="生效"
      ok-type="primary" :loading="effectLoading" @cancel="effectVisible = false"
      @ok=" effectMethod({ id: currentRow.id, status: 2 })" />

    <DelConfirmModal v-if="delVisible" :visible="delVisible" :loading="delLoading" @cancel="delVisible = false"
      @ok="deleteMethod({ id: currentRow.id })" />
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import formateDate from '@/utils/formateDate'
import { assessmentMethodPage, assessmentMethodDelete, assessmentMethodUpdateStatus, assessmentTips } from '@/api/assessment';
import { AssessmentMethodPageRespVO, BaseSuccessRespDTO, PageBeanAssessmentMethodPageRespVO } from '@/api/assessment/types';
import { managerStatusMap, assessmentStatusBgColorMap } from '@/utils/constText'

const router = useRouter()
const tableRef = ref()

const dataList = ref<AssessmentMethodPageRespVO[]>([])
const total = ref(0)
const columns = ref([
  {
    title: '序号',
    width: 48,
    dataIndex: 'index',
    formatter: (row: any, column: any, cellValue: any, index: number) => {
      return index + 1
    }
  },
  {
    title: '管理办法名称',
    dataIndex: 'name',
  },
  {
    title: '文号',
    dataIndex: 'documentName',
    width: 200
  },
  {
    title: '开始生效时间',
    dataIndex: 'effectiveTime',
    formatter: (row) => formateDate(row.effectiveTime).format("YYYY-MM-DD"),
    width: 120
  },
  {
    title: '状态',
    dataIndex: 'status',
    slotName: 'status',
    width: 100
  },
  {
    title: '操作',
    width: 210,
    dataIndex: 'default',
    slotName: 'default',
  }
])

const currentRow = ref<PageBeanAssessmentMethodPageRespVO>({})
const delVisible = ref(false)
const effectVisible = ref(false)

const { run: tips } = useRequest(assessmentTips, {
  manual: true,
  onSuccess: (res: boolean) => {
    if (res) {
      ElMessage({
        message: '管理办法已变更，请及时更新奖励办法!',
        type: 'warning',
        plain: true,
      })
    }
  }
})

const { run: getData, loading } = useRequest(assessmentMethodPage, {
  manual: true,
  onSuccess: (res: PageBeanAssessmentMethodPageRespVO) => {
    const { content, totalElements } = res || {}
    total.value = totalElements || 0
    dataList.value = content || []
  }
})

const { run: deleteMethod, loading: delLoading } = useRequest(assessmentMethodDelete, {
  manual: true,
  onSuccess: (res: BaseSuccessRespDTO) => {
    if (res.isSuccess) {
      delVisible.value = false
      ElMessage({
        message: '删除成功!',
        type: 'success',
        plain: true,
      })
      tableRef.value?.refreshInitPage()
    }
  }
})

const { run: effectMethod, loading: effectLoading } = useRequest(assessmentMethodUpdateStatus, {
  manual: true,
  onSuccess: (res: BaseSuccessRespDTO) => {
    if (res.isSuccess) {
      effectVisible.value = false
      ElMessage({
        message: '生效成功!',
        type: 'success',
        plain: true,
      })
      tableRef.value?.refreshInitPage()
    }
  }
})

const handleEffect = (row: AssessmentMethodPageRespVO) => {
  currentRow.value = row
  effectVisible.value = true
}

const handleEdit = (row: AssessmentMethodPageRespVO, type: string) => {
  router.push({ path: '/achievementReward/assessmentReward/managerWay/detail', query: { id: row.id, type } })
}

const handleDelete = (row: AssessmentMethodPageRespVO) => {
  currentRow.value = row
  delVisible.value = true
}

onMounted(() => {
  tips()
  tableRef.value?.refreshInitPage()
})
</script>

<style scoped lang="scss">
.manager-way-container {
  --at-apply: px-[20px] pb-[20px] bg-white rounded-[4px];
}
</style>
